<template>
  <div>
    <div class="top flexBetweenCenter">
      <div class="flexStart">
        <div class="rigntMargin">
          <a-range-picker
            v-decorator="['orderTime']"
            v-model="dayTime"
            :disabled-date="disabledDate"
            @openChange="onOpenChange"
            @calendarChange="onCalendarChange"
            @change="onChangeTimer"
          />
         
        </div>
        <div>
          <a-button style="font-size:16px">
            <span style="display:inline-block;hight:32px"></span>导出
          </a-button>
        </div>
      </div>
      <div>
        <a-input-search placeholder="请输入姓名" style="width: 300px" @search="onSearch" />
      </div>
    </div>
    <!-- 表格 -->
    <div class="atable">
      <a-table :columns="columns" :data-source="data">
        <!-- <span slot="action" slot-scope="text, record">
            <a style="color:#1890FF" @click="onEdit(text, record)">详情</a>
        </span>-->
      </a-table>
    </div>
    <!-- 分页 -->
    <div class="pagination flexBetween">
      <div>共{{total}} 条记录 第 {{current}} / {{Math.ceil((total/pageSize))}} 页</div>
      <div>
        <a-pagination
          :current="current"
          :page-size-options="pageSizeOptions"
          :total="total"
          show-size-changer
          :pinspector-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
          show-quick-jumper
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '40'">{{ props.value }}条/页</span>
            <span v-if="props.value === '40'">全部</span>
          </template>
        </a-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

const columns = [
  { title: '日期', dataIndex: 'name', key: 'name' },
  { title: '姓名', dataIndex: 'proName', key: 'proName' },
  { title: '岗位', dataIndex: 'proCode', key: 'proCode', align: 'center' },
  { title: '考勤记录（当天首次时间）', dataIndex: 'proId', key: 'proId', align: 'center' },
  { title: '考勤方式', dataIndex: 'entryTime', key: 'entryTime', align: 'center' }
]
const tabdata = [
  {
    key: '1',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '微信'
  },
  {
    key: '2',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  },
  {
    key: '3',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  },
  {
    key: '4',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '微信'
  },
  {
    key: '5',
    name: '2020-12-21',
    proName: '张三',
    proCode: '技术员',
    proId: '06:04:58',
    entryTime: '考勤机'
  }
]
export default {
  data() {
    return {
      dayTime: [moment(new Date(), 'YYYY-MM-DD'), moment(new Date(), 'YYYY-MM-DD')],
      columns,
      data: tabdata,
      pageSizeOptions: ['5', '10', '20', '30', '40'],
      current: 1,
      pageSize: 10,
      total: 1
    }
  },
  mounted() {
    // console.log(this.monthTime)
  },
  methods: {
    moment,
    onSearch(value) {
      console.log(value)
    },

    onShowSizeChange(current, pageSize) {
      // console.log(current, pageSize)
      // this.current = 1
      // this.pageSize = pageSize
      // this.getTable()
    },
    pageChange(current, pageSize) {
      // this.current = current
      // this.pageSize = pageSize
      // this.getTable()
    },
    timeChange(e) {
      console.log(e)
    },
    /**
     * 清空禁用时间段的设置
     */
    onOpenChange(status) {
      // 清空禁用时间段的设置
      this.disabledCurrent = null
    },
    /**
     * 获取手动选择的时间段起始值
     */
    onCalendarChange(dates) {
      console.log('From: ', dates[0], ', to: ', dates[1])
      // 获取手动选择的时间段起始值
      this.disabledCurrent = dates[0]
    },
    /**
     * 时间控制切换赋值
     */
    onChangeTimer(moment, data) {
      this.fromTime = data[0]
      this.toTime = data[1]
    },
    /**
     * 1、时间限制范围 开始时间~结束时间不能超过31天
     */
    disabledDate(current) {
      if (!this.disabledCurrent) return false

      return (
        (current &&
          current <
            moment(this.disabledCurrent)
              .subtract(1, 'M')
              .startOf('day')) ||
        current >
          moment(this.disabledCurrent)
            .add(1, 'M')
            .endOf('day')
      )
    }
  }
}
</script>

<style scoped>
::v-deep .ant-calendar-picker-icon {
  display: none;
}
::v-deep .ant-calendar-picker-clear {
  display: none;
}

::v-deep .ant-calendar-picker-input.ant-input {
  width: 320px;

  cursor: pointer;
}
.rigntMargin {
  margin-right: 20px;
}
.restDay {
  color: #ff9933;
}
.top {
  padding-top:30px ;
  margin-bottom: 30px;
}
.atable {
  margin-bottom: 20px;
}
</style>